<template>
	<div class="wrap car3">
    <!-- 購物車部分 -->
    <div class="content" >
      <!-- 購物車表格 -->
      <el-table :data="cartProducts1" style="width: 100%"  @selection-change="handleSelectionChange"  ref="singleTable" :header-cell-style="tableHeaderColor">
        <el-table-column type="selection" width="60" align='center' :selectable="handleDisable"></el-table-column>
        <!-- <el-table-column label="商品ID" align="center">
            <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column> -->
        <el-table-column label="商品信息" align="center" width="300">
            <template slot-scope="scope">
              <div class="goodMsg">
                <img :src="scope.row.litemallGoods.picUrl">
                <div>{{scope.row.litemallGoods.name}}</div>   
              </div>                      
            </template>
        </el-table-column>
		 
        <!-- <el-table-column label="折扣" align="center">
            <template slot-scope="scope">{{scope.row.litemallGoods.discount == 1 ? '無折扣' :(scope.row.litemallGoods.discount)*10+'折'}}</template>
        </el-table-column> -->
        <el-table-column label="單價" align="center">
            <template slot-scope="scope">
              <div class="priceBox" v-if="scope.row.litemallGoods.counterPrice == scope.row.litemallGoods.retailPrice">
                <div>${{scope.row.litemallGoods.counterPrice}}</div>
                <!-- <div>原價:${{scope.row.litemallGoods.retailPrice}}</div> -->
              </div>              
              <div class="priceBox" v-else>
                <div>${{scope.row.litemallGoods.counterPrice}}</div>
                <div style="color:#999"> ${{scope.row.litemallGoods.retailPrice}}</div>
              </div>              
            </template>
        </el-table-column>
        <el-table-column label="數量" align="center" width="150">
		    	<template slot-scope="scope">
					<!-- <el-input-number size="mini" :max="scope.row.litemallGoods.number>0?scope.row.litemallGoods.number:1" :min="1" :value="scope.row.num" v-on:input="handleBlurCar" @change="handleChangeCar( scope.row )"></el-input-number> -->

          <el-input-number size="mini" :max="99" :min="1" :value="scope.row.num" v-on:input="handleBlurCar" @change="handleChangeCar( scope.row )"></el-input-number>
		    	</template>
		    </el-table-column>
        <el-table-column label="總價" align="center">
            <template slot-scope="scope">
              <div class="allPrice">${{scope.row.totalNum}}</div>
            </template>
        </el-table-column>
		    <el-table-column label="" width="200">
		    	<template slot-scope="scope">
            <div class="operationBox">
              <div @click="addCoolect(scope.row)">移至我的收藏夾</div>
              <div @click="gotoDetele( scope.row )">刪除</div>
            </div>
			        <!-- <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="dialogVisibleTrue( scope.row )">刪除</el-button> -->
			    </template>
		    </el-table-column>
		  </el-table>
      <!-- 結算內容 -->
      <div class="settlement">
        <div class="settlement_top" style="display: none;">
          <div class="settlement_item">
            <div>{{totalNum1}}件商品，總商品金額：</div>
            <div>${{totalPrice1}}</div>
          </div>
          <!-- <div class="settlement_item">
            <div>小計：</div>
            <div>-$15.00</div>
          </div>-->
          <div class="settlement_item">
            <div>折扣：</div>
            <div>-${{parseFloat(totalOriPrice) - parseFloat(totalPrice1)}}</div>
          </div>
          <!-- <div class="settlement_item">
            <div>應付總金額：</div>
            <div class="itotal_price">${{totalPrice1}}</div>
          </div> -->
        </div>
        <div class="settlement_bottom">
          <div class="settlement_left">
            <!-- <div @click="gotoDeteleAll()">刪除</div> -->
            <!-- <div>移至我的收藏夾</div> -->
          </div>
          <div class="settlement_center">已選商品<span>{{selectLength}}</span>件</div>
          <div class="settlement_right">
            <div>應付金額（不含運費）：<span>${{totalPrice2}}</span></div>
            <div @click="settlement()">結算</div>
          </div>
        </div>   
      </div>
    </div>

    <!-- <div class="content nohaveshop" v-if="cartProducts1.length == 0">
      <p class="p1">妳的購物車空空如也~~</p>
      <p class="p2">快去采購吧!</p>
    </div> -->



    <!-- 其它商品推薦 -->
    <div class="recommend" v-if="arr.length != 0">
      <div class="recommend_title">
        加購商品
      </div>
      <!-- 對商品添加左右箭頭 -->
      <div class="recommend_content">
        <div class="icon_left" v-if="arr.length >=4"><img src="@/assets/left.png" alt="" @click='gotoleft($event)'></div>
        <!-- 超過4個出現左右按鈕 -->
        <div :class="arr.length >=4 ? 'collage_mostimg':'collage_smallimg'"  @mouseout="removeActiveAll()">
          <div class="collage_scroll">
            <div class="scroll_item" v-for="(item,index) in arr" :key='index' @mouseover="changeActive(index)" @mouseout="removeActive(index)"> 
              <!-- 商品圖片 -->
              <img :src="item.picUrl" alt=""  @click="gotodetail(item)">
              <!-- 商品內容 -->
              <div class="scroll_item_con">
                <!-- 標題 -->
                <div class="item_con_title">{{item.name}}</div>
                <!-- 簡介 -->
                <div class="item_con_text">
                  <div>
                    pv:{{item.pvValue}}
                  </div>
                  <!-- 購物數量 -->
                  <div v-show="isHover == index?true:false">
                    <el-input-number :max="item.number>0?item.number:1" size="mini" :min="1" :value="item.quannum" v-on:input="handleBlur" @change="handleChange( item )"></el-input-number>
                  </div>
                </div>
                <!-- 價格 -->
                <div class="item_con_price">
                  <div>${{item.counterPrice}}</div>
                  <div>{{item.retailPrice}}</div>
                </div>
                <!-- 加入購物車按鈕 -->
                <div class="item_con_car" v-show="isHover == index?true:false">
                  <img src="@/assets/car1.png" alt="">
                  <div @click="addToCart(item)">加入購物車</div>
                </div>
              </div>
            </div>                
          </div>
        </div>  
        <div class="icon_left" v-if="arr.length >=4"><img src="@/assets/right.png" alt="" @click='gotoright($event)'></div>
      </div>
    </div>

		<!-- <Info v-if="totalNum"></Info> -->

		<el-dialog title="註意" :visible.sync="dialogVisible" width="20%">
		  	<span>確定要刪除這個商品嗎?</span>
		  	<span slot="footer" class="dialog-footer">
		    	<el-button @click="dialogVisible = false">取 消</el-button>
		    	<el-button type="primary" @click="dialogSure">確 定</el-button>
		  	</span>
		</el-dialog>
	</div>
  	
</template>

<script>
	import { mapState, mapGetters, mapActions } from 'vuex'
  import Info from './info'
  import {findGoodsCarList,addItemsToCart,delGoodsCar,updateGoodsNum,addordeleteGood} from '@/api/car'
  import {goodlist,hotSellRecommend} from '@/api/index'
  import { getToken,removeToken } from '@/utils/auth' // 驗權
	export default {
		name: 'cart',
	  	data() {
			return {
				dialogVisible : false,
				result : null,
        input_number_value_car:1,//購物車的數量輸入
        multipleSelection:[],//多選
        selectLength:0,//選中幾個
        selectArray:[],//選中的內容
        selectAllPrice:0,//選中的幾個價格
        arr:[],
        input_number_value:1,
        isHover:-1,
        user_id:5,
        cartProducts1:[],//購物車數據
        totalNum1:0,//幾件
        totalPrice1:0,//總金額
        totalPrice2:0,//應付金額
        user_id:null,
        isShow:true,
        totalOriPrice:0
			}
		},
		computed:{
			// ...mapGetters([
			// 	'cartProducts','totalNum','totalPrice'
			// ])
    },
    mounted(){
      this.getcardata()
      this.gooddata()
      
      if(getToken()){
        this.user_id = getToken()
      }else{
        this.user_id = null
      }
    },
		components: {
	    	Info
	  	},
		methods: {
      // 購物車被下架了就不選中
      handleDisable(row, index) {
        // 函數需要壹個返回值,true為可選,false為不可選擇
        if (row.litemallGoods.isOnSale == false) {
          return false //商品下架不可選擇
        } else {
          return true //商品上架可以選擇
        }
      },
      // 選中
      getselect(){
        // this.selectArray = []
        var array = JSON.parse(localStorage.getItem('select'))
        this.$nextTick(()=>{
          this.cartProducts1.forEach(row => {
            if(array.indexOf(row.goodsCarId) >= 0){
              this.$refs.singleTable.toggleRowSelection(row,true);
            }
          })
        })
        console.log(array)
      },
      // 獲取購物車數據列表
      getcardata(){
        // this.isShow = true
        findGoodsCarList({userId:getToken()}).then(response => {
          if(response.errno == 0){
             this.cartProducts1 = response.data.list
            //  if(this.cartProducts1.length == 0){
            //    this.isShow = true
            //  }else{
            //    this.isShow = false
            //  }
             this.cartProducts1.forEach( ( item, index ) => {
                item.totalNum = (item.litemallGoods.counterPrice*item.num).toFixed(2)
              });
              var that = this
              that.$nextTick(() => {
                that.toggleSelection(that.cartProducts1)
              })
            this.totalNumss()
            this.totalPricess()
            // this.getselect()
          }
          console.log(response)
        })
      },
      // 默认全选
      toggleSelection(rows){
        if(rows){
          rows.forEach(row => {
            this.$refs.singleTable.toggleRowSelection(row,true);
          })
        }else{
          this.$refs.singleTable.clearSelection();
        }
      },
      // 推薦商品列表
      gooddata(){
        hotSellRecommend({catoryId:2}).then(response => {
          if(response.errno == 0){
            if(response.data.goodsList.length != 0){
              this.arr = response.data.goodsList
              for(var i = 0;i<this.arr.length;i++){
                this.arr[i].quannum = 1
              }
            }else{
              this.arr = []
            }        
          }
        })
      },
      // 添加購物車
      addToCart(items){
        if(items.isOnSale){
          if(getToken()){
            if(items.quannum > items.number){
              this.$message({
                type:'error',
                message:'加入失敗，該商品現有庫存為'+items.number
              })
            }else{
              var array = [items.id+'#'+items.quannum]
              addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
                if(response.errno == 0){
                  this.$message({
                    type:'success',
                    message:'加入成功，請前往我的購物車進行查看'
                  })
                  this.getcardata()
                }else{
                  this.$message({
                    type:'error',
                    message:response.errmsg
                  })
                }
                console.log(response)
              })
            }  
          }else{
            this.$message({
              type:'error',
              message:'請您先登錄'
            })
          }   
        }else{
          this.$message({
            type:'error',
            message:'很抱歉該商品已下架'
          })
        }
           
      },
      // 刪除購物車
      gotoDetele(row){
        var array = [row.goodsCarId]
        this.$confirm('確定要刪除該商品, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deltegoodCar(array)
        }).catch(() => {
                   
        });
        
      },
      // 刪除商品全選
      gotoDeteleAll(){
        if(this.multipleSelection.length == 0){
          this.$message({
            type: 'error',
            message: '請選擇要刪除的商品'
          });
        }else{
          var array = []
          for(var i = 0;i<this.multipleSelection.length;i++){
            array.push(this.multipleSelection[i].goodsCarId)
          } 
          this.$confirm('確定要刪除所選商品, 是否繼續?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deltegoodCar(array)
          }).catch(() => {
                    
          });
        }
      },
      // 刪除公用接口
      deltegoodCar(arr){
        delGoodsCar({goodsCarId:arr,userId:getToken()}).then(response => {
          if(response.errno == 0){
            this.$message({
              type: 'success',
              message: '刪除成功!'
            });
            this.getcardata()
          }else{
            this.$message({
              type: 'error',
              message: response.errmsg
            });
          }
        })
      },
      //設置表格行的樣式
      tableRowStyle({row,rowIndex}){
          return 'background-color:pink;font-size:15px;'
      },
      //設置表頭行的樣式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:#C37B5A;text-align:center;height:60px;font-size: 18px;font-weight: 400;color: #FFFFFF;line-height: 60px;'
      },
      // 多選按鈕選擇的內容
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.selectLength = this.multipleSelection.length
        var array = []
        if(this.multipleSelection.length != 0){
          for(var i = 0;i<this.multipleSelection.length;i++){
            array.push(this.multipleSelection[i].goodsCarId)
          } 
        }
        this.selectArray = array
        localStorage.setItem('select',JSON.stringify(this.selectArray)) //將選擇的內容存儲在localstorage中
        localStorage.setItem('pv',JSON.stringify(this.multipleSelection))
        this.totalPriceYing()
      },
			dialogVisibleTrue( data ){
				this.dialogVisible = true;
				this.result = data;
			},
			dialogSure(){
				this.delProduct( this.result );
        this.dialogVisible = false;
      },

      // 購物車裏面的數量變化
      handleBlurCar(value){
        this.input_number_value_car = value
      },
      handleChangeCar( data ) {
        data.num = this.input_number_value_car;
        data.totalNum = (data.litemallGoods.counterPrice*data.num).toFixed(2)
        // this.numChange1( data );
        this.totalPricess()
        this.totalNumss()
        this.totalPriceYing()
        updateGoodsNum({goodsId: data.litemallGoods.id,num: data.num,userId: getToken()}).then(response => {
          console.log(response)
        })
      },
      // 數量計算
      totalNumss(){
        let total = 0;
        this.cartProducts1.forEach( item => {
            total += item.num
        })
        this.totalNum1 = total
        return this.totalNum1;
      },
      // 總價計算
      totalPricess(){
        let total = 0;
        var total_ori = 0;

        this.cartProducts1.forEach( item => {
            total += item.litemallGoods.counterPrice * item.num;
            total_ori += item.litemallGoods.retailPrice * item.num;
        })
        this.totalPrice1 = total.toFixed(2);

        this.totalOriPrice = total_ori.toFixed(2);
        return this.totalPrice1;
      },
      // 應付金額
      totalPriceYing(){
        var total = 0;
        this.multipleSelection.forEach( item => {
            total += Number(item.totalNum)
        })
        return this.totalPrice2 = total.toFixed(2)
      },
      // 推薦內容
      // 輸入購物數量
      handleBlur(value){
        this.input_number_value = value
      },
      // 計算購物數量
      handleChange( data ) {
        let re = /^[0-9]+$/
        // if (!re.test(this.input_number_value)) {
        //   this.$message.error('請輸入大於1的正整數！')
        //   this.$nextTick(() => {
        //     data.quannum = parseInt(this.input_number_value)
        //     // data.quannum = this.input_number_value;
        //   })
        // }
        data.quannum = parseInt(this.input_number_value)
      },
      // 多圖向左移動
      gotoleft(event){
        var box = document.getElementsByClassName('collage_scroll')[0]
        var boxleft = box.offsetLeft;
        if(boxleft == 0){
          box.style.left = '0px'
        }else{
          box.style.left = boxleft + 300 + 'px'
        }    
        
      },
      // 多圖向右移動
      gotoright(event){
        var box = document.getElementsByClassName('collage_scroll')[0]
        var boxleft = box.offsetLeft;
        var lengthNum = box.children.length
        var boxParentWidth = box.parentNode.offsetWidth;
        if(boxleft <= (boxParentWidth-((lengthNum-1)*300))){
          console.log('最後壹張了')
        }else{
          box.style.left = boxleft - 300 + 'px'
        }
      },
      // 鼠標移入
      changeActive(index){
        this.isHover = index
      },
      // 鼠標移出
      removeActive(index){
        this.isHover = index
      },
      // 鼠標移出所有
      removeActiveAll(){
        this.isHover = -1
      },
      gotodetail(item){
        this.$router.push({path:'/detail',query:{id:item.id}})
      },
      settlement(){
        if(this.multipleSelection.length == 0){
          this.$message({
            type:'error',
            message:'請選擇要結算的商品'
          })
        }else{
          this.$router.push({path:'/settlement'})
        }
        
      },
      // 添加取消收藏
      addCoolect(row){
        if(getToken()){
          addordeleteGood({"type": 0,"userId": getToken(),"valueId": row.litemallGoods.id}).then(response => {
            if(response.errno == 0){
              this.$message({
                type:'success',
                message:response.data.remindMsg
              })
            }else{
              this.$message({
                type:'error',
                message:response.errmsg
              })
            }
            console.log(response)
          })
        }else{
          this.$message({
            type:'error',
            message:'請您先登錄'
          })
        }      
      },
      
	  }
	}
</script>
<style >
.car3 .el-table td, .el-table th{
  padding: 0px 0px!important;
}
</style>
<style  scoped>

.content_item>.video{
  display: none;
}
.wrap{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f5f5f5;
  padding-top: 30px;
}
.content{
  width: 70%;
  box-sizing: border-box;
  margin: 0px auto;
}

/* 修改多選全選框樣式 */
.content>>>.el-checkbox__inner:hover{
  border-color: #E5E5E5;
}
.content>>>.el-checkbox__inner.is-focus,.content>>>.el-checkbox__inner{
  background: #E5E5E5;
  border-color: #E5E5E5;
}
/* 多選選中 */
.content>>>.el-checkbox__inner::after{
  border-color: #FF4400;
}
/* 不全選 */
.content>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
  background: #FF4400;
}
.content>>>.el-checkbox__input.is-checked .el-checkbox__inner, .content>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #E5E5E5;
  border-color: #E5E5E5;
}

/* 每壹行行高設置 */
.content>>>.el-table .cell {
  line-height: 60px;
}

/* 商品信息 */
.goodMsg{
  display: flex;
  align-items: center;
}
.goodMsg img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-right: 10px;
  border-radius: 4px;
}

.content>>>.el-table .cell{
  border-radius: 4px;
}
/* 修改每壹行之間的空隙 */
.content>>>.el-table td,.content>>>.el-table th.is-leaf{
  border-bottom: 15px solid #f5f5f5;
 
}

/* 修改數量加減框樣式 */
.content>>>.el-input-number__decrease,.content>>>.el-input-number__increase{
  background: #fff;
}
/* 加減號樣式修改 */
.content>>>.el-input-number__decrease, .content>>>.el-input-number__increase{
  color:  #FF4400;
}
.content>>>.el-input-number__decrease.is-disabled{
  color: #C0C4CC;
}
.content>>>.el-input-number__decrease:hover:not(.is-disabled), .content>>>.el-input-number__increase:hover{
  color: #FF4400;
}
.content>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .content>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.content>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.content>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.content>>>.el-input__inner:active{
  border-color: #DCDFE6;
}

/* 設置單價樣式 */
.priceBox>div:nth-child(1){
  font-size: 16px;
  font-weight: 600;
  color: #C37B5A;
  line-height: 30px;
}
.priceBox>div:nth-child(2){
  font-size: 14px;
  font-weight: 600;
  text-decoration: line-through;
  color: #C37B5A;
  margin: 0px;
  line-height: 30px;
}

/* 設置總價樣式 */
.allPrice{
  font-size: 16px;
  font-weight: bold;
  color: #C37B5A;
}

/* 操作樣式 */
.operationBox>div:nth-child(1){
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.operationBox>div:nth-child(2){
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
/* 結算內容 */
.settlement{
  width: 100%;
  box-sizing: border-box;
}
.settlement_top{
  width: 100%;
  padding: 30px;
  background: white;
  box-sizing: border-box;
}
.settlement_item{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  line-height: 28px;
  justify-content: space-between;
}
.settlement_item>div:nth-child(1){
  text-align: right;
  width: 90%;
}
.settlement_item>div:nth-child(2){
  width: 10%;
  text-align: right;
}
.itotal_price{
  color:#E2231A
}
.settlement_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background: #EEEEEE;
  border-radius: 4px;
}
.settlement_left{
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 70px;
  cursor: pointer;
}
.settlement_left>div:nth-child(1){
  margin-right: 20px;
}
.settlement_center{
  font-size: 14px;
  font-weight: 400;
  color: #000003;
  line-height: 70px;
}
.settlement_center>span{
  font-size: 18px;
  font-weight: bold;
  color: #C37B5A;
  line-height: 70px;
  margin: 0px 10px;
}
.settlement_right{
  display: flex;
  align-items: center;
}
.settlement_right>div:nth-child(1){
  font-size: 14px;
  font-weight: 400;
  color: #000003;
  line-height: 70px;
  margin-right: 50px;
}
.settlement_right>div:nth-child(1)>span{
  font-size: 14px;
  font-weight: bold;
  color: #BE795A;
  line-height: 70px;
}
.settlement_right>div:nth-child(2){
  width: 161px;
  height: 70px;
  background: #BE795A;
  border-radius: 0px 4px 4px 0px;
  font-size: 22px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 70px;
  text-align: center;
  cursor: pointer;
}
.recommend{
  width: 70%;
  box-sizing: border-box;
  margin: 0px auto;
  margin-top: 30px;
  padding-bottom: 50px;
}
.recommend_title{
  width: 100%;
  height: 60px;
  background: #C37B5A;
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 60px;
  box-sizing: border-box;
  padding-left: 20px;
}
.recommend_content{
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  box-sizing: border-box; 
  margin: 20px 0px;
}
.icon_left img{
  width: 30px;
  height: 56px;
  cursor: pointer;
  margin-top: 170px;
}
.collage_smallimg{
  width: 100%;
  height: 400px;
  /* height: 450px; */
}
.collage_smallimg>div{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.collage_smallimg>div>img{
  width: 285px;
  /* height: 253px; */
  height: 190px;
  margin: 0px 5px;
  object-fit: fill;
}
.collage_mostimg{
  width: 90%;
  height: 400px;
  /* height: 450px; */
  /* overflow-x: scroll; */
  position: relative;
  overflow: hidden;
}
.collage_mostimg>div{
  display: flex;
  justify-content: flex-start;
  position:absolute;
  left: 0px;
}
.scroll_item{
  width: 300px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
.scroll_item>img{
  width: 285px;
  /* height: 253px; */
  object-fit: fill;
  height: 190px;
}
.scroll_item_con{
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.item_con_title{
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  line-height: 36px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.item_con_text{
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.item_con_text>div:nth-child(1){
  font-size: 20px;
  font-weight: 400;
  color: #BE9A67;
  line-height: 36px;
  overflow: hidden;
  height: 36px;
  text-overflow:ellipsis;
  white-space: nowrap;  
}
.item_con_text>div:nth-child(2){
  display: flex;
  align-items: center;
}
.item_con_text>>>.el-input-number,.item_con_text>>>.el-input-number--mini{
  width: 100px;
}
.item_con_text>>>.el-input-number__decrease,.item_con_text>>>.el-input-number__increase{
  background: #fff;
}
.item_con_text>>>.el-input-number__decrease:hover, .item_con_text>>>.el-input-number__increase:hover{
  color: #101010;
}
.item_con_text>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .item_con_text>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:active{
  border-color: #DCDFE6;
}
.item_con_price{
  display: flex;
  align-items: center;
  margin: 15px 0px;
}
.item_con_price>div:nth-child(1){
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 400;
  color: #FF1010;
}
.item_con_price>div:nth-child(2){
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
  color: #999999;
  margin-left: 20px;
}
.item_con_car{
  width: 100%;
  height: 50px;
  background: #BE9A67;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.item_con_car>img{
  width: 37px;
  height: 30px;
}
.item_con_car>div{
  font-size: 20px;
  font-family: 59;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 10px;
  white-space: nowrap;
  cursor: pointer;
}
/* .good{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.good_item{
  width: 21.96%;
  height: 400px;
  box-sizing: border-box;
  margin:20px 0px;
  margin-right: 53.4px;
}
.good_item:nth-child(4n){
  margin-right:0px;
}
.good_item>img{
  width: 100%;
  height: 190px;
  object-fit: contain;
}
.scroll_item_con{
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.item_con_title{
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  line-height: 36px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.item_con_text{
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.item_con_text>div:nth-child(1){
  font-size: 20px;
  font-weight: 400;
  color: #101010;
  line-height: 36px;
  overflow: hidden;
  height: 36px;
  text-overflow:ellipsis;
  white-space: nowrap;  
}
.item_con_text>div:nth-child(2){
  display: flex;
  align-items: center;
}
.item_con_text>>>.el-input-number,.item_con_text>>>.el-input-number--mini{
  width: 100px;
}
.item_con_text>>>.el-input-number__decrease,.item_con_text>>>.el-input-number__increase{
  background: #fff;
}
.item_con_text>>>.el-input-number__decrease:hover, .item_con_text>>>.el-input-number__increase:hover{
  color: #101010;
}
.item_con_text>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .item_con_text>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:active{
  border-color: #DCDFE6;
}
.item_con_price{
  display: flex;
  align-items: center;
  margin: 15px 0px;
}
.item_con_price>div:nth-child(1){
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 400;
  color: #FF1010;
}
.item_con_price>div:nth-child(2){
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
  color: #999999;
  margin-left: 20px;
}
.item_con_car{
  width: 100%;
  height: 50px;
  background: #BE9A67;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.item_con_car>img{
  width: 37px;
  height: 30px;
}
.item_con_car>div{
  font-size: 20px;
  font-family: 59;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 10px;
  white-space: nowrap;
  cursor: pointer;
} */
.nohaveshop{
  width: 100%;
  text-align: center;
}
.nohaveshop p {
  font-size: 22px;
  color: #999;
}
</style>